<template>
    <van-pull-refresh v-model="isLoading"  success-text="刷新成功" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="list">
          <li v-for="item in list" :key="item.id">
            <div>
              <van-image lazy-load :src="item.image" />
            </div>
            <div>
              <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
              <p>￥{{ item.price }}</p>
            </div>
          </li>
        </ul>
      </van-list>
      </van-pull-refresh>
</template>

<script setup>
import { ref, onMounted } from "vue";
const active = ref(0);
const list = ref([]);
const pagination = ref(1);
  const loading = ref(false);
  const isLoading = ref(false);
    const finished = ref(false);
import request from "@/utils/request";
onMounted(() => {
  request
    .get("/list", {
      params: {
        pagination: 1,
        pageNum: 10,
      },
    }).then((res) => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
});

const onLoad =()=>{
     loading.value=true 
     request.get('/list',{
        params:{
           pagination:pagination.value,
           pageNum:10
        }
     }).then((res) => {
      if (res.data.code == 200) {
        list.value = [...list.value,...res.data.data]
      }
      loading.value=false
      pagination.value++
      if(list.value.length >= res.data.total){
        finished.value=true
      }
    });
}

const onRefresh=()=>{
   setTimeout(() => {
      
        isLoading.value = false;
      
      }, 1000);
}
</script>

<style lang="scss" scoped>
.list {
  column-count: 2;
  column-gap: 10px;
  li {
    break-inside: avoid;
    img {
      width: 100%;
    }
  }
}
</style>